<template>
  <div class="h-full" v-if="showTooltip">
    <t-tooltip placement="bottom" :content="props.tooltipContent" :show-arrow="false">
      <div class="home-header-item font-size-5 h-full flex-center pl-3 pr-3 cursor-pointer"
           :class="props.contentClass">
        <slot/>
      </div>
    </t-tooltip>
  </div>
  <div v-else class="home-header-item font-size-5 h-full flex-center pl-3 pr-3 cursor-pointer"
       :class="props.contentClass">
    <slot/>
  </div>
</template>

<script setup lang="ts">
import {computed} from "vue";

const props = defineProps({
  tooltipContent: {
    type: String,
    default: ''
  },
  contentClass: {
    type: String,
    default: ''
  }
});

const showTooltip = computed(() => Boolean(props.tooltipContent));
</script>

<style lang="scss" scoped>
.home-header-item {
  &:hover {
    background: var(--td-bg-color-container-hover);
  }
}
</style>